<template>
    <div>
        <el-dialog title="添加轮播图" :visible.sync="zhe">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>

                <el-form-item label="图片" pr v-if="form.pid != 0">
                    <el-upload action="#" list-type="picture-card" :file-list="photo" :auto-upload="false"
                        :on-preview="onPreview" :on-change="changeInfo" :limit="1">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

                <el-form-item label="状态">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex"
import { banneradd, bannerinfo, banneredit } from "../../request/api"
export default {
    props: ["zhe", "isAdd"],
    data() {
        return {
            form: {
                title: "",
                img: null,
                status: 1,
                id: 0

            },
            rules: {
                title: [
                    { required: true, message: "请输入标题", trigger: "blur" },
                ]
            },
            photo: [],
            dialogImageUrl: "",
            dialogVisible: false
        }
    },
    methods: {
        ...mapActions({
            getBanner: "banner/getBannerListAction"

        }),
        onPreview(file) {
            // console.log(file, '文件的内容')
            //打开预览弹框
            this.dialogVisible = true
            // 给弹框赋值图片地址
            this.dialogImageUrl = file.url
        },
        changeInfo(file) {
            this.form.img = file.raw
        },
        close() {
            this.$emit("close")
            this.reset()

        },
        submit() {
            this.$refs.form.validate((val) => {
                if (val) {
                    if (this.isAdd) {
                        banneradd(this.form).then(res => {
                            // console.log(res);

                            if (res.code == 200) {
                                this.$message('添加成功');
                                this.getBanner()
                                this.close()

                            }
                        })
                    } else {
                        // console.log(this.form);

                        banneredit(this.form).then(res => {
                            this.$message('修改成功');
                            this.getBanner()
                            this.close()
                        })

                    }
                }
            })


        },
        // 表单清空事件
        reset() {
            // 清空表单数据
            this.form = {
                title: "",
                img: null,
                status: 1
            },
                //清空正则验证
                this.$refs.form.resetFields()
            //清空图片
            this.photo = []


        },
        lookup(id) {
            bannerinfo({ id }).then(res => {
                // console.log(res);
                this.form = res.list
                this.form.id = id
                this.photo = [{ url: res.list.img }]
            })

        }


    },
    mounted() {

    },
    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped></style>